<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/pages/templates/TemplateTech.xhtml">

	<ui:define name="titre">Fun With Videos</ui:define>
	<ui:define name="content">
<h:head></h:head>
	<h:body>
		<h:form>

	    <p:dataGrid value="#{mbCatalogue.listVideo}" var="video" columns="3"  
	        rows="12" paginator="true"  
	        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
	        rowsPerPageTemplate="9,12,15">  
	  
	        <p:panel header="#{video.nom}" style="text-align:center">  
		        <h:panelGrid columns="1" border="0" style="width:100%">  
					<p:graphicImage value="resources/images/#{video.affiche}.gif"/>
			        <h:outputText value="#{video.duree}">Durée(min)</h:outputText>
			        <h:outputText>Date de disponibilité</h:outputText>
			        <h:outputText value="#{video.dateMiseAdispo}"><f:convertDateTime type="date" pattern="dd-MM-yyyy"/></h:outputText>au
			        <h:outputText value="#{video.dateFinMiseADispo}"><f:convertDateTime type="date" pattern="dd-MM-yyyy"/></h:outputText><br/>
			        <p:commandLink  oncomplete="PF('carDialog').show()" title="View Detail">  
			            <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />   
			            <f:setPropertyActionListener value="#{video}" target="#{mbCatalogue.selectedVideo}" />  
			        </p:commandLink>  
		         </h:panelGrid>  
	        </p:panel>  
	    </p:dataGrid> 
    
    
        <p:dialog header="Car Detail" widgetVar="carDialog" modal="true">  
	        <p:outputPanel id="carDetail" style="text-align:center;" layout="block">  
	          
	            <p:graphicImage value="resources/images/u3_normal.gif"/>  
	              
	            <h:panelGrid  columns="2" cellpadding="5">  
	                <h:outputLabel for="modelNo" value="Model No: " />  
	                <h:outputText id="modelNo" value="#{video.nom}" />  
	                  
	                <h:outputLabel for="year" value="Year: " />  
	                <h:outputText id="year" value="#{video.duree}" />  
	                  
	<!--                 <h:outputLabel for="color" value="Color: " />   -->
	<!--                 <h:outputText id="color" value="#{tableBean.selectedCar.color}" style="color:#{tableBean.selectedCar.color}"/>   -->
	            </h:panelGrid>
	              
	        </p:outputPanel>  
    	</p:dialog>  
    

		</h:form>
		</h:body>
	</ui:define>
</ui:composition>
